<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { getDanCiApi, checkWorldApi } from '../../api/request.js';
import { includeListGetItem } from '../../utils/index.js';
const props = defineProps({});
onMounted(() => {});
let platform = uni.getStorageSync('platform');
const center = ref(null);
const goback = async () => {
    center.value.open('center');
};
const query = ref({
    word_ids: '',
    hui: '',
    index: 0
});
const list = ref(null);
onLoad(async (e) => {
    query.value.word_ids = e.id;
});
onShow(async () => {
    let res = await getDanCiApi(query.value);
    list.value = res.data;
    console.log(list.value);
});

const playIndex = ref(-1);
const select = ref('');
const changeSelect = (e) => {
    select.value = e;
};
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
//最后点击的是谁
const nowIndex = ref(null);
//被点击过都在里面
const getIdList = ref([]);
//点击过是第几次点击
const statusList = ref({});
const playAudio = (id, url, status = false) => {
    uni.$emit('playAudio', url);
    nowIndex.value = id;
    const indexs = getIdList.value.findIndex((item) => item == id);
    if (indexs == -1) {
        getIdList.value.push(id);
    }
    //剪纸盒子的骡子
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
    } else {
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 1
                : 1;
    }
};

const returnItemClassStatus = (id) => {
    if (nowIndex.value) {
        let index = includeListGetItem(select.value == 0 ? getIdList.value : getIdLists.value, id);
        if (index == -1) {
            return 'none';
        }
        const zhege = statusList.value.id == id;
        if (zhege) {
            let num = statusList.value.status;
            if (num == 1) {
                return 'heide';
            } else if (num == 2) {
                return 'fanyi';
            } else if (num == 3) {
                return 'kong';
            }
        }
    } else {
        return 'none';
    }
};

const que = () => {
    uni.navigateBack();
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 汇总强化 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                mode="widthFix"
            />
        </view>
        <scroll-view
            scroll-y="true"
            class="body"
            v-if="list && list.length"
            :style="{ height: platform.gaodu - platform.dingbu - 96 - 28 + 'rpx' }"
        >
            <view
                class="item uni-row"
                :id="item.id"
                v-for="(item, index) in list"
                :key="index"
                :class="returnItemClassStatus(item.id)"
                @click="playAudio(item.id, item.detail.word_audio_url_en)"
            >
                <view class="left-wrap">
                    {{ item.name }}
                </view>
                <view class="fanti">
                    {{ item.detail.word_explain[0].part }}
                    {{ item.detail.word_explain[0].means[0] }}
                </view>
                <view class="left-wrap" style="opacity: 0">
                    {{ item.word }}
                </view>
            </view>
            <view class="" style="height: 20rpx"> </view>
        </scroll-view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
    </view>
    <uni-popup ref="center">
        <view class="wai">
            <view class="title"> 提示 </view>
            <view class="label"> 是否放弃单词强化! </view>
            <view class="footer uni-row">
                <view class="shi uni-row bts" @click="center.close()"> 取消 </view>
                <view class="shi uni-row bt" @click="que"> 确定 </view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="less">
.wai {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 96rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 38rpx 0 0;
        text-align: center;
    }

    .footer {
        margin-top: 56rpx;
        justify-content: space-around;

        .bt {
            background: #9561f3;
            color: #fff;
        }

        .bts {
            color: #9561f3;
            border: 2rpx solid #9561f3;
        }

        .shi {
            justify-content: center;
            border-radius: 36rpx;
            font-size: 24rpx;
            width: 184rpx;
            height: 68rpx;
        }
    }
}

.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            margin-left: 32rpx;
        }

        .menu {
            position: relative;

            .item {
                justify-content: center;
                width: 144rpx;
                height: 52rpx;
                font-size: 24rpx;

                &.dayin {
                    color: #fff;
                    background: #fa862c;
                    border-radius: 8rpx;
                }

                &.yings {
                    position: absolute;
                    top: 52rpx;
                    z-index: 100;
                    background: #ffe5d2;
                    border-radius: 8rpx 8rpx 0 0;
                    color: #fa862c;
                }

                &.yingss {
                    border-radius: 0 0 8rpx 8rpx;
                    position: absolute;
                    top: 104rpx;
                    z-index: 100;
                    color: #fa862c;
                    background: #fff3ea;
                }
            }
        }

        .submit {
            font-size: 24rpx;
            color: #fff;
            background-color: #9561f3;
            justify-content: center;
            width: 144rpx;
            height: 52rpx;
            border-radius: 8rpx;
            margin-left: 32rpx;
        }
    }

    .body {
        padding: 0 28rpx;

        .item {
            justify-content: space-between;
            height: 84rpx;
            margin-bottom: 16rpx;
            border-radius: 8rpx;
            padding: 0 28rpx;
            overflow: hidden;
            background-color: #fff;
            border-bottom: 1rpx solid #bcbcbc;

            &.heide {
                .left-wrap {
                    font-size: 36rpx;
                    color: #333333;
                    font-weight: 600;
                }
            }

            &.fanyi {
                .left-wrap {
                    font-size: 36rpx;
                    color: #333333;
                    font-weight: 600;
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.kong {
                .left-wrap {
                    opacity: 0;
                }

                .fanti {
                    opacity: 0;
                }
            }

            .left-wrap {
                font-size: 36rpx;
                color: #333333;
            }

            .fanti {
                font-size: 28rpx;
                color: #333333;
                opacity: 0;
                transition: 0.2s all;
            }
        }
    }
}

.footers {
    position: fixed;
    left: 50%;
    bottom: 28rpx;
    transform: translate(-50%, 0);
    justify-content: center;

    .liang {
        font-size: 24rpx;
        color: #333333;
        // margin: 0 26rpx;
    }

    .icon {
        justify-content: center;
        padding: 0 26rpx;
    }

    .last,
    .next {
        width: 40rpx;
        height: 40rpx;
    }
}
</style>
